// 导入vue
import Vue from 'vue'

// base.css 样式初始化 + 样式兼容
import 'normalize.css/normalize.css'

// 按需导入 => 打包体积 => 加载更快 => 用户体验更好
// 后台管理系统 => 用户体验不会特别注重

// 导入elementui 组件库  => 完整导入(1.组件用的7788  2.不会特别管用户体验)
import ElementUI from 'element-ui'
// 导入组件库样式
import 'element-ui/lib/theme-chalk/index.css'
// 导入一个语言包 英文包 用于中英切换
// import locale from 'element-ui/lib/locale/lang/en'

import i18n from '@/lang'

// 配置ElementUI的中英切换逻辑
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})

// 导入全局样式
import '@/styles/index.scss'

import App from './App'
import store from './store'
import router from './router'

// 导入icon模块 直接执行
import '@/icons' // icon

// 导入js文件 并且直接执行
import '@/permission'

import components from '@/components/index'
// components => 插件对象(install)
// Vue.use() => components.install()
Vue.use(components)

// import '@/styles/element-variables.scss'

// 导入打印的那个插件
import Print from 'vue-print-nb'
// 安装插件 => install 内部帮你全局注册了一个自定义指令  v-print
Vue.use(Print)

// import { formatTime } from '@/filters'
// Vue.filter('formatTime', formatTime)

// 极端的场景: filters/index.js 文件中 封装了很多过滤器函数, 需要你帮我拿到所有过滤器函数 全局注册
import * as filters from '@/filters'
// console.log(filters);
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

// 导入http模块
// import http from '@/utils/request'

// 挂载到vue的原型
// Vue.prototype.$http = http

// 有后端接口, 不需要mock: 1.main.js相关代码 2.mock文件夹 3.vue.config.js 39行 => 重启
// if (process.env.NODE_ENV === 'production') {
//   const { mockXHR } = require('../mock')
//   mockXHR()
// }

// 安装组件库 且英文包
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
// Vue.component() ........ 很多组件的注册
console.log(ElementUI, 8787)
Vue.use(ElementUI)

// 注册全局自定义
// import { imgerror, color } from '@/directives'
// Vue.directive('imgerror', imgerror)
// Vue.directive('color', color)

// 如果希望一次性导入 js文件内部所有的按需导出,
// 得到一个对象
import * as directives from '@/directives'
// console.log(directives, 1234)
// 对象的遍历  for in  /  Object.keys()
//  Object.keys() => 优势在于 优先拿到一个数组, 将来过滤 排序, 最后遍历
// 这里是eslint没有检测到key发生变化, 推荐const
// eslint-disable-next-line prefer-const
// for (let key in directives) {
//   // 'color' 'imgerror'
//   // console.log(key, directives[key])
//   Vue.directive(key, directives[key])
// }

// ['imgerror', 'color']
Object.keys(directives).forEach((key) => {
  Vue.directive(key, directives[key])
})

// 需求1: 还希望有一个全局自定义指令 v-color="color"  color: 'red'
// 需求2: 希望拿到所有的指令对象, 进行全局注册!!!  => 极端

// 关闭生产提示
Vue.config.productionTip = false

// console.log(process.env.VUE_APP_BASE_API)
// console.log(process.env.baseURL)
// console.log(process.env.port)

new Vue({
  // el: '#app',  老写法
  // $router  $route $tore $t  $i18n
  router,
  i18n,
  store,
  render: h => h(App)
}).$mount('#app')
